import { Avatar, Button, Cell } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import { useMemo } from "react";
import CustomTabBar from "../../custom-tab-bar";
//Setting
import { FilterH, Order } from "@nutui/icons-react-taro";
import { useRequest } from "ahooks";
import CommonTitle from "../../components/CommonTitle";
import { getUserInfoApi, getWithdrawApi } from "../../servers/servers";

export default function Index() {
  const page = useMemo(() => Taro.getCurrentInstance().page, []);

  // 个人信息
  const { data: userInfo, run } = useRequest(async () => {
    const _res = await getUserInfoApi();
    return _res?.data;
  });

  // 提现信息
  const { data: withdrawInfo, run: getWithDraw } = useRequest(async () => {
    const _res = await getWithdrawApi();
    return _res?.data;
  });

  useDidShow(() => {
    const tabbar = Taro.getTabBar < CustomTabBar > page;

    run();
    getWithDraw();
    // tabbar?.setSelected(3);
  });

  return (
    <View className="index">
      {/* <CommonTitle title="个人账户" /> */}
      <Cell
        align="center"
        // extra="描述文字"
        onClick={() => {
          Taro.navigateTo({
            url: `/pages/my/setting/index`,
          });
        }}
        extra={
          <FilterH
          // onClick={() => {
          //   Taro.navigateTo({
          //     url: `/pages/my/setting/index`,
          //   });
          // }}
          />
        }
        title={
          <div style={{ display: "inline-flex", alignItems: "center" }}>
            <Avatar size="small" src={userInfo?.avatar} />
            <span style={{ marginLeft: "5px" }}>{userInfo?.user?.name}</span>
          </div>
        }
      />
      <CommonTitle title="收入管理" />
      {/*  */}
      {/* <Cell.Group divider={false}>
        <Cell
          title={
            <div style={{ display: "flex", alignItems: "center" }}>
              <Received />{" "}
              <span
                style={{
                  marginLeft: 5,
                }}
              >
                当月预估
              </span>
            </div>
          }
        />
        <View className="user_count">
          <View className="user_count__sub">
            <View className="user_count__sub--num">
              {withdrawInfo?.month?.development}
            </View>
            <View>发展奖励</View>
          </View>
          <View className="user_count__sub">
            <View className="user_count__sub--num">
              {withdrawInfo?.month?.renting}
            </View>
            <View>在租奖励</View>
          </View>
          <View className="user_count__sub">
            <View className="user_count__sub--num">
              {withdrawInfo?.month?.total}
            </View>
            <View>合计奖励</View>
          </View>
        </View>
      </Cell.Group> */}

      <Cell.Group divider={false}>
        <Cell
          title={
            <div style={{ display: "flex", alignItems: "center" }}>
              <Order />
              <span
                style={{
                  marginLeft: 5,
                }}
              >
                累计奖励
              </span>
            </div>
          }
        />
        <View className="user_count">
          <View className="user_count__sub">
            <View className="user_count__sub--num">
              {" "}
              {withdrawInfo?.reward?.development}
            </View>
            <View>发展奖励</View>
          </View>
          <View className="user_count__sub">
            <View className="user_count__sub--num">
              {" "}
              {withdrawInfo?.reward?.renting}
            </View>
            <View>单电奖励</View>
          </View>
          <View className="user_count__sub">
            <View className="user_count__sub--num">
              {" "}
              {withdrawInfo?.reward?.car_electricity}
            </View>
            <View>车电奖励</View>
          </View>
          <View className="user_count__sub">
            <View className="user_count__sub--num">
              {" "}
              {withdrawInfo?.reward?.total}
            </View>
            <View>合计奖励</View>
          </View>
        </View>
      </Cell.Group>

      <CommonTitle title="提现管理" />

      <Cell.Group divider={false}>
        <View className="user_count">
          <View className="user_count__sub">
            <View className="user_count__sub--num">
              {withdrawInfo?.withdrawal?.withdrawn}
            </View>
            <View>已提现收入</View>
          </View>
          <View className="user_count__sub">
            <View
              className="user_count__sub--num"
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              {withdrawInfo?.withdrawal?.withdrawable}{" "}
              <Button
                size="mini"
                type="primary"
                fill="outline"
                style={{
                  marginLeft: 5,
                }}
                onClick={() => {
                  Taro.navigateTo({
                    url: `/pages/my/withdrawal/index`,
                  });
                }}
              >
                去提现
              </Button>{" "}
            </View>
            <View>可提现收入 </View>
          </View>
        </View>
      </Cell.Group>
    </View>
  );
}
